<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Castle Post Form Products</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<link rel='stylesheet' type='text/css' href='style.css' />
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />

<script type="text/javascript">
	var aImages = new Array();
	var aURL = new Array();
	var aArtists = new Array();
	var iPrev = -1;
	var iRnd = -1;
	
	aImages[0] = "http://canvasinabox.com/preview/7/47/47-7-preview_large.jpg";
	aImages[1] = "http://canvasinabox.com/preview/7/48/48-7-preview_large.jpg";
	aImages[2] = "http://canvasinabox.com/preview/7/46/46-7-preview_large.jpg";
	aImages[3] = "http://canvasinabox.com/preview/18/133/133-18-preview_large.jpg";
	aImages[4] = "http://canvasinabox.com/preview/27/174/174-27-preview_large.jpg";
	aImages[5] = "http://canvasinabox.com/preview/27/173/173-27-preview_large.jpg";
	aImages[6] = "http://canvasinabox.com/preview/5/25/25-5-preview_large.jpg";

	// aURL[0] = "http://kunst.canvasinabox.com/?_globalsearch=47-7";
	// aURL[1] = "http://kunst.canvasinabox.com/?_globalsearch=48-7";
	// aURL[2] = "http://kunst.canvasinabox.com/?_globalsearch=46-7";
	// aURL[3] = "http://kunst.canvasinabox.com/?_globalsearch=133-18";
	// aURL[4] = "http://kunst.canvasinabox.com/?_globalsearch=174-27";
	// aURL[5] = "http://kunst.canvasinabox.com/?_globalsearch=173-27";
	// aURL[6] = "http://kunst.canvasinabox.com/?_globalsearch=25-5";
	
	// aArtists[0] = "Marcel Verkaart";
	// aArtists[1] = "Marcel Verkaart";
	// aArtists[2] = "Marcel Verkaart";
	// aArtists[3] = "Marco Schippers";	
	// aArtists[4] = "Sylvia Hennequin";
	// aArtists[5] = "Sylvia Hennequin";
	// aArtists[6] = "Jonathan Vos";
	
	$(document).ready(function() {
	
		/* Define the function that triggers to fade in the background as soon as the image has loaded */
		$("img#bag").load(function()
			{
				/* Fade in during 3 seconds */
				$("img#bag").fadeTo(3000,1);
				
				/* Animate the picture description during 1 second */
				setTimeout(function() { $("#image_description").animate({right: '+=150'}, 1000) }, 1000);
			
				/* Set the timeout to fade out the image and the description after 10 seconds*/
		    	setTimeout(function() 
			    	{
			    		$("#image_description").animate({right: '-=150'}, 1000);
			    		$("img#bag").fadeOut(3000);
			    		
			    		/* Load the next image after 4 seconds */
			    		setTimeout(LoadImages,4000);
			    	}
			    	,10000);
			}			
		)
	
		/* Start the slideshow one second after the page is ready */ 
		setTimeout(LoadImages,1000);
		
    });

    function LoadImage(iNr)
	{
	
		/* Assign the new image to the background */
		$("img#bag").attr("src", aImages[iNr]);
 		
 		/* Assign the artist name to the description */
 		$("#image_artist").html(aArtists[iNr]);
 		
 		/* Assign the image url to the description */
        $("a#image_url").attr("href", aURL[iNr]);
        $("a#image_url").html("");
                        	
    };
    
    function LoadImages()
    {
    	
    	/* Select a random image number and make sure this is not equal to the previous image */
    	while(iPrev == iRnd)
    	{
    		iRnd = Math.floor(Math.random()*aImages.length);
    	}
    	
    	/* Show the selected image */
    	LoadImage(iRnd);
    	
    	iPrev = iRnd;
    	
    };
</script>
</head>
<body>

<!-- This is the main page -->
<div id="page_overlay">
	</div>
</div>

<!-- The container for the description -->
<div id="image_description">
	<span id="image_artist"></span><br/>
	<a id="image_url"></a>
</div>

<!-- The container for the background-image -->
<img id="bag" style="display:none" />

<!-- The container for the grid on top of the background-image -->
<div id="bag_grid">
</div>
	<div id="menu">
		<h1><a href="index.html"><b>HOME</b></a></h1>
		<div>
			<ul>
				<li><a href="gallery.html">GALLERY</a></li>
				<li><a href="projects">PROJECTS</a></li>
				<li><a href="testimonials">TESTIMONIALS</a></li>
				<li><a href="contact.html">CONTACT</a></li>
			</ul>
		</div>
	</div>
</body>
</html>
